<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0006: Position a Window | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0006: Position a Window" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to position a GTK Window - a D language tutorial." />
<meta property="og:description" content="How to position a GTK Window - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0006-position-a-window.html" />
<meta property="og:url" content="http://localhost:4000/posts/0006-position-a-window.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-02-01T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0006: Position a Window" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-02-01T00:00:00-05:00","datePublished":"2019-02-01T00:00:00-05:00","description":"How to position a GTK Window - a D language tutorial.","headline":"0006: Position a Window","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0006-position-a-window.html"},"url":"http://localhost:4000/posts/0006-position-a-window.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/window.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-02-01T00:00:00-05:00" itemprop="datePublished">Friday, February 1, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0006-position-a-window">0006: Position a Window</h1>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/001_window/window_06.png" alt="Current example output" />	<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																								<!-- modal# -->
				<span class="close0">&times;</span>																					<!-- close# -->
				<img class="modal-content" id="img00" />																					<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");																			// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");																				// img#
			var modalImg = document.getElementById("img00");																		// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];															// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/001_window/window_06_term.png" alt="Current example terminal output" /> <!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																												<!-- modal# -->
				<span class="close1">&times;</span>																										<!-- close# -->
				<img class="modal-content" id="img11" />																									<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																							// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																								// img#
			var modalImg = document.getElementById("img11");																						// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];																				// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																																<!-- filename (below)-->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/001_window/window_06_positioned.d" target="_blank">here</a>.
	</div>
</div>

<p>Sometimes you need a window to land in a specific spot on the screen. As a user, I like windows and dialogs to open in the last position I used and closed them. This is pretty much mandatory behaviour with a three-monitor set-up so I don’t waste time scanning all that screen real estate to figure out where my application or dialog just opened.</p>

<p>For this example, I used two buttons, one to move the window up and to the left, the other to move it down to the right. And because of that, I had to use a <code class="language-plaintext highlighter-rouge">Box</code> object because (if you remember) we can’t put more than one object into a window, but we can if we use a <code class="language-plaintext highlighter-rouge">Box</code> and put the <code class="language-plaintext highlighter-rouge">Box</code> in the window.</p>

<h2 id="something-new">Something New</h2>

<p>The other thing I introduce here is the <code class="language-plaintext highlighter-rouge">interface</code>. It’s used to sketch out a plan for classes which will be similar enough to share functions and data, but not so similar that the functions will all do exactly the same things in the same way. In our case, we want one button to move the window to the left, the other to the right. That’s similar enough that it makes sense to derive these two from an interface because, with both buttons, the window’s moving somewhere. It’s just the destinations that are different.</p>

<p>The interface could also be said to lay down the rules for <code class="language-plaintext highlighter-rouge">Button</code>s that change the position of the window. By reading through the interface code, we can see that it:</p>

<ul>
  <li>has a meaningful name (<code class="language-plaintext highlighter-rouge">PositionButton</code>),</li>
  <li>has one function that all derived buttons must also have (<code class="language-plaintext highlighter-rouge">moveWindow</code>), and</li>
  <li>takes a <em>GTK</em> <code class="language-plaintext highlighter-rouge">MainWindow</code> as an argument.</li>
</ul>

<h2 id="inheritance-in-d">Inheritance in D</h2>

<p><code class="language-plaintext highlighter-rouge">LeftButton</code> and <code class="language-plaintext highlighter-rouge">RightButton</code> are the derived <code class="language-plaintext highlighter-rouge">Button</code>s. They inherit from the interface—<code class="language-plaintext highlighter-rouge">PositionButton</code>—as well as the top-level <code class="language-plaintext highlighter-rouge">Button</code> class.</p>

<p>The rules regarding inheritance in <em>D</em> are:</p>

<ul>
  <li>an interface can inherit only from another interface,</li>
  <li>a class can inherit from one other class, but</li>
  <li>a class can also inherit from as many interfaces as you need it to, and</li>
  <li>when listing what a class inherits from, you have to list the class first, then any interfaces.</li>
</ul>

<p>Both <code class="language-plaintext highlighter-rouge">LeftButton</code> and <code class="language-plaintext highlighter-rouge">RightButton</code> are set up with the same string of inheritances, but implementation of functions? That’s another story.</p>

<p>In <code class="language-plaintext highlighter-rouge">LeftButton</code>, the <code class="language-plaintext highlighter-rouge">moveWindow()</code> function gets the current window position as <code class="language-plaintext highlighter-rouge">x</code> and <code class="language-plaintext highlighter-rouge">y</code> coordinates, then subtracts <code class="language-plaintext highlighter-rouge">40</code> and <code class="language-plaintext highlighter-rouge">60</code> (respectively) from <code class="language-plaintext highlighter-rouge">x</code> and <code class="language-plaintext highlighter-rouge">y</code>, then calls the window’s <code class="language-plaintext highlighter-rouge">move()</code> function.</p>

<p><code class="language-plaintext highlighter-rouge">RightButton</code> does the same thing, but adds to <code class="language-plaintext highlighter-rouge">x</code> and <code class="language-plaintext highlighter-rouge">y</code> instead of subtracting. In fact, all I did to create <code class="language-plaintext highlighter-rouge">RightButton</code> was copy/paste, change minus signs to plus and replace <code class="language-plaintext highlighter-rouge">Left</code> with <code class="language-plaintext highlighter-rouge">Right</code>.</p>

<h2 id="conclusion">Conclusion</h2>

<p>Okay, a short one this time. Until next time, keep those cards and letters coming in and stay happy.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0005-window-size.html">Previous: Size a Window</a>
	</div>
	<div style="float: right;">
		<a href="./0007-button-release-and-reorganizing-the-code.html">Next: Button Release</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0006-position-a-window.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
